<template>
  <div class="app-container">
    <el-form :inline="true" :model="query" size="small">
      <el-form-item label="学员姓名">
        <el-input v-model="query.studentName" placeholder="学员姓名" clearable />
      </el-form-item>
      <el-form-item label="提审人">
        <el-input v-model="query.opName" placeholder="学员姓名" clearable />
      </el-form-item>
      <el-form-item label="提交时间">
        <el-date-picker v-model="query.date" type="daterange" align="right" unlink-panels range-separator="至" 
          start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="审批状态">
        <el-select v-model="query.auditStatus" multiple collapse-tags clearable>
          <el-option
            v-for="item in auditStatusList"
            :key="item.value"
            :label="item.label"
            :value="item.value" />
          </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="toQuery">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 列表 -->
    <el-table v-loading="loading" :data="data" highlight-current-row>
      <el-table-column type="index" label="序号">
        <template slot-scope="scope">
          <span>{{ scope.$index+(page - 1) * size + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="merchantStudentName" label="学生姓名" width="80"/>
      <el-table-column prop="merchantCourseName" label="订购课程" min-width="120"/>
      <el-table-column prop="coursePrice" label="课程单价（元）"/>
      <el-table-column prop="bookHour" label="订购课时"/>
      <el-table-column prop="largessHour" label="赠送课时"/>
      <el-table-column prop="opName" label="提审人"/>
      <el-table-column prop="createTime" label="提审时间">
        <template slot-scope="scope">
          <span>{{ formatDate(new Date(scope.row.createTime)) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="bookRemark" label="备注">
        <template slot-scope="scope">
          {{ scope.row.bookRemark && scope.row.bookRemark.slice(0, 20) }}
        </template>
      </el-table-column>
      <el-table-column prop="auditStatusName" label="审核状态">
        <template slot-scope="scope">
          <el-tag :type="scope.row.auditStatus | statusFilter">{{ scope.row.auditStatusName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="auditOpName" label="审单人"/>
      <el-table-column prop="auditRemark" label="审核备注">
        <template slot-scope="scope">
          {{ scope.row.auditRemark && scope.row.auditRemark.slice(0, 20) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="90">
        <template slot-scope="scope">
          <el-button v-permission="['ADMIN', 'AUDIT_ALL', 'BOOK_AUDIT']" 
            :disabled="scope.row.auditStatus > 1"
            type="text"
            @click="handleAudit(scope.row)">审批</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页组件-->
    <div class="pg-wrapper">
    <el-pagination
      :total="total"
      layout="total, prev, pager, next, sizes"
      @size-change="sizeChange"
      @current-change="pageChange"/>
    </div>

    <!-- 订课审核对话框 -->
    <book-audit ref="auditForm" 
      :order-course-audit-id="orderCourseAuditId"
      :course-name="courseName"
      :book-hour="bookHour"
      :largess-hour="largessHour"
      :remark="remark"/>
  </div>
</template>

<script>
import initData from '@/mixins/initData'
import { formatDate } from '@/utils/index'
import BookAudit from './module/BookAudit'

export default {
  mixins: [initData],
  components: { BookAudit },
  data() {
    return {
      query: {},
      orderCourseAuditId: 0,
      courseName: '',
      bookHour: 0,
      largessHour: 0,
      remark: '',
      auditStatusList: [],
      loading: false,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'warning',
        10: 'success',
        11: 'danger'
      }
      return statusMap[status]
    }
  },
  mounted() {
    this.auditStatusList = this.$store.getters.auditStatusList
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    formatDate,
    beforeInit() {
      this.url = 'audit/books'
      this.params = {
        opName: this.query.opName,
        merchantStudentName: this.query.studentName,
        auditStatusList: this.query.auditStatus.join(','),
        date: this.query.date,
        page: this.page,
        size: this.size,
      }
      return true
    },
    handleAudit(row) {
      this.orderCourseAuditId = row.orderCourseAuditId,
      this.courseName         = row.merchantCourseName,
      this.bookHour           = row.bookHour,
      this.largessHour        = row.largessHour,
      this.remark             = row.bookRemark,
      this.$refs.auditForm.dialog = true
    }
  }
}
</script>

<style>

</style>